<template>
  <div>
    <el-container style="widht: 100%; height: 100vh">
      <el-header>
        <div>
          <img src="../assets/cs.png" alt />
          <span>超市销售后台管理系统</span>
        </div>
        <div class="timeEnter">
          <i class="iconfont">&#xe665; </i>
          <span>登录时间:{{ nowTime }}</span>
        </div>
        <el-button type="success" @click="logout">
          <span class="logout">退出</span>
        </el-button>
      </el-header>
      <el-container>
        <el-aside width="150px">
          <div class="toggle-button">
            <i class="iconfont">&#xe69d;</i>
            <!-- <span>首页</span> -->
            <router-link to="/index" class="homepage">首页</router-link>
          </div>
          <el-menu>
            <el-submenu index="1">
              <template slot="title">
                <div>
                  <i class="el-icon-user"></i>
                  <span>用户管理</span>
                </div>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1"
                  ><i class="el-icon-menu"></i>
                  <router-link to="/index/userlist"
                    >用户列表</router-link
                  ></el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-shopping-cart-full"></i>
                <span>销售管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="2-1"
                  ><i class="el-icon-menu"></i>
                  <router-link to="/index/foodclass"
                    >商品分类</router-link
                  ></el-menu-item
                >
                <el-menu-item index="2-2"
                  ><i class="el-icon-menu"></i>
                  <router-link to="/index/foodlist"
                    >商品列表</router-link
                  ></el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-pie-chart"></i>
                <span>销售分析</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="3-1">
                  <i class="el-icon-menu"></i>
                  <router-link to="/index/mapView">销量情况</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nowTime: "",
      imgwrap: [
        { url: require("../assets/focus.jpg") },
        { url: require("../assets/focus1.jpg") },
        { url: require("../assets/focus2.jpg") },
        { url: require("../assets/focus3.jpg") },
      ],
    };
  },
  create() {},
  mounted() {
    let that = this;
    this.timer = setInterval(function () {
      that.nowTime = new Date().toLocaleString();
    });
  },
  beforeDestroy: function () {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },

  methods: {
    logout() {
      this.$router.push({ path: "/" });
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
@font-face {
  font-family: "iconfont";
  src: url("../assets/font/iconfont.woff2?t=1638945058113") format("woff2"),
    url("../assets/font/iconfont.woff?t=1638945058113") format("woff"),
    url("../assets/font/iconfont.ttf?t=1638945058113") format("truetype");
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.homepage {
  color: #fff;
  line-height: 24px;
  vertical-align: top;
}
a {
  margin-right: 5px;
  text-decoration: none;
  color: #333;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 20px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 20px;
}
.el-header div {
  display: flex;
  align-items: center;
}
.el-header img {
  width: 50px;
  height: 50px;
}
.toggle-button {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
.timeEnter .iconfont {
  font-size: 25px;
  margin-right: 5px;
}
.toggle-button .iconfont {
  font-size: 25px;
  line-height: 24px;
}
.toggle-button span {
  font-size: 14px;
  vertical-align: top;
}
.logout{
  display: inline-block;
  width: 5vw;
  height: 2vh;
  line-height: 2vh;
}
</style>

